<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
   <%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人信息</title>

		<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="css/personal.css" rel="stylesheet" type="text/css">
		<link href="css/infstyle.css" rel="stylesheet" type="text/css">
		<script src="AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
		<script>
			//用户名检测，不能为空，长度在4到10之间
			function checkusername() {
				var username = document.getElementById("username").value;
				var checkusernameinfo = $("#checkusernameinfo");
				checkusernameinfo.html("");
				if ("" == username) {
					checkusernameinfo.html("用户名必填");
					document.getElementById("submit").disabled = true;
				}
				else if((/\s+/.test(username))){
					checkusernameinfo.html("用户名不能有空格");
					document.getElementById("submit").disabled = true;
				}
				else if(username.length > 10  || username.length < 4){
					checkusernameinfo.html("用户名必须在4~10字符之间");
		 			document.getElementById("submit").disabled = true;
				}else{
					document.getElementById("submit").disabled = false;	
				}
			}
			// 密码检测
			function checkpassword() {
				var password = document.getElementById("password").value;
				var checkpasswordinfo = $("#checkpasswordinfo");
				checkpasswordinfo.html("");
				if ("" == password){
					checkpasswordinfo.html("密码必填");
					document.getElementById("submit").disabled = true;
				}else if((/\s+/.test(password))){
					checkpasswordinfo.html("密码不能有空格");
					document.getElementById("submit").disabled = true;
				}
				else if(password.length > 10 || password.length < 4){
					checkpasswordinfo.html("密码要在4~10位之间");
					document.getElementById("submit").disabled = true;
				}else{
					document.getElementById("submit").disabled = false;	
				}
				checkrepassword();
			}
			// 重复密码检测，不能为空，也密码相同
			function checkrepassword() {
				var repassword = document.getElementById("repassword").value;
				var checkrepasswordinfo = $("#checkrepasswordinfo");
				checkrepasswordinfo.html("");
				if ("" == repassword){
					checkrepasswordinfo.html("确认密码必填");
					document.getElementById("submit").disabled = true;
				}
				else if(repassword != document.getElementById("password").value){
					checkrepasswordinfo.html("密码不一致");
					document.getElementById("submit").disabled = true;
				}else{
					document.getElementById("submit").disabled = false;	
				}
			}

	</script>
</head>
<body>
		<jsp:include page="main_top.jsp"></jsp:include>
	
		<div class="center">
			<div class="col-main">
				<aside class="menu">
					<ul>
						<li class="person">
							<ul>
								<li class="active"> <a href="Register.jsp">新用户注册</a></li>
							</ul>
						</li>
					</ul>
				</aside>
				<div class="main-wrap">
				
					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf">
								<strong class="am-text-danger am-text-lg">新用户注册</strong>
							</div>
						</div>
						<hr/>
						
						<!--注册 -->
						<div class="info-main">
							<s:if test="#session.registererror!=null">
								<s:property value="#session.registererror"/>
							</s:if>
							<form class="am-form am-form-horizontal" action="Customer_registerCustomer.action" method="post" enctype="multipart/form-data">
								
								
								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">头像</label>
									<div class="am-form-content">
										<center>
											<input id="fileupload" name="image" type="file" multiple />
									</div>
								</div>	
							
								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">用户名</label>
									<div class="am-form-content">
										<font color="red">*<span id="checkusernameinfo"></span></font>
										<input type="text" name="username" id="username"
										onPropertyChange="checkusername()" oninput="checkusername()" onfocus="cleanusernameerror()" />
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">登录密码</label>
									<div class="am-form-content">
										<font color="red">*<span id="checkpasswordinfo"></span></font>
										<input type="password" name="password" id="password"
										onPropertyChange="checkpassword()" oninput="checkpassword()" onfocus="cleanpassworderror()" />
									</div>
								</div>
								
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">确认密码</label>
									<div class="am-form-content">
										<font color="red">*<span id="checkrepasswordinfo"></span></font>
										<input type="password" name="repassword" id="repassword"
										onPropertyChange="checkrepassword()" oninput="checkrepassword()" onfocus="cleanrepassworderror()" />
									</div>
								</div>
								<br/>
								
								<div class="info-btn">
									<input type="submit" id="submit" value="提交注册信息" class="am-btn am-btn-danger" disabled="disabled" />
								</div>

							</form>
						</div>

					</div>

				</div>
				<!--底部-->
				<jsp:include page="main_foot.jsp"></jsp:include>
			</div>
		</div>
</body>
</html>